<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>电影管理</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <style>
        .layui-layout-body{
            overflow: scroll;
        }
    </style>
</head>
<body class="layui-layout-body">
    <div>
        <table id="demo" lay-filter="test"></table>
    </div>
    <script src="../../layui/layui.js"></script>
    <script src="../../js/jquery-1.12.4.min.js"></script>
    <script src="../../js/lodash.min.js"></script>
    <script src="../../js/common.js"></script>

    <script>
        layui.use(['table', "form"], function () {
            const table = layui.table;
            //第一个实例
            const tableObj = table.render({
                elem: '#demo',
                url: '/api/Movie',//数据接口，模拟的接口
                page: true,
                autoSort: false, //禁用前端自动排序
                toolbar: '#toolbarDemo',
                cols: [
                    [{
                        templet: '<div>{{d.name}}|{{d.ename}}</div>',
                        title: '名称',
                        width: "15%",
                        sort: true
                    }, {
                        field: 'type',
                        title: '类型',
                        width: "10%",
                    }, {
                        field: 'area',
                        title: '地区',
                        width: "10%",
                        sort: true
                    }, {
                        field: 'time',
                        title: '时长',
                        width: "10%",
                        sort: true
                    }, {
                        field: 'isHot',
                        title: '正在热映',
                        templet: "#hot",
                        width: "8%",
                        sort: true,
                    },
                    {
                        field: 'isComing',
                        title: '即将上映',
                        templet: "#coming",
                        width: "8%",
                        sort: true,
                    },
                    {
                        field: 'isClassic',
                        title: '经典影片',
                        templet: '#classic',
                        width: "8%",
                        sort: true,
                    }, {
                        title: '操作',
                        // templet: '',
                        toolbar: '#barDemo',
                        width: "25%",
                    },
                    ]
                ]
            });

            //监听排序事件 
            table.on('sort(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                tableObj.reload({
                    initSort: obj,//记录初始排序，如果不设的话，将无法标记表头的排序状态。
                    where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                        field: obj.field, //排序字段
                        order: obj.type //排序方式
                    }
                });
            });

            //头工具栏事件
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'addStu':                            //ok  
                        location = "./addMovie.html"
                        break;
                    case 'btnSubmit':                         //ok      
                        let key = $("#txtKey").val()
                        layui.table.reload("demo", {
                            where: {
                                key,
                            },
                            page: {
                                curr: 1
                            }
                        })
                        break;
                    case 'btnReset':                        //ok         
                        layui.table.reload("demo", {
                            where: {
                                key: ""
                            },
                            page: {
                                curr: 1
                            }
                        })
                        break;
                };
            });

            //监听行工具事件
            table.on('tool(test)', async function (obj) {
                var data = obj.data;
                switch (obj.event) {
                    case 'delete':                    //删除按钮
                        $.ajax({
                            url: "/api/Movie/" + data._id,
                            method: "delete",
                            success: function (html) {
                                alert("删除成功！")
                                location.href = "./index.html"
                            },
                            error: function () {
                                alert("删除失败..")
                            }
                        });
                        break;
                    case 'btnReset':
                        $("#txtKey").val("")
                        break;
                    case 'director':
                        layer.open({
                            type: 2,
                            title: false,
                            closeBtn: 3,
                            scrollbar: true,
                            area: ['800px', '400px'],
                            content: "SeeDirector.html?id=" + obj.data._id
                        });
                        break;
                    case 'actor':
                        layer.open({
                            type: 2,
                            title: false,
                            closeBtn: 3,
                            scrollbar: true,
                            area: ['924px', '400px'],
                            content: "SeePerformer.html?id=" + obj.data._id
                        });
                        break;
                    case 'movie_photo':
                        layer.open({
                            type: 2,
                            title: false,
                            closeBtn: 3,
                            scrollbar: true,
                            area: ['920px', '400px'],
                            content: "SeeStills.html?id=" + obj.data._id
                        });
                        break;
                };
            });

            //lsc
            //form表单中 开关按钮的控制
            layui.form.on("switch", async function (obj) {
                $.ajax({
                    url: "/api/Movie/" + obj.elem.value,
                    method: "put",
                    data: obj.elem.name + "=" + obj.elem.checked

                });

            })
        });

    </script>
    <!-- //头工具栏按钮 -->
    <script type="text/html" id="toolbarDemo">
      <button class="layui-btn layui-btn-sm" lay-event="addStu">添加电影</button>
        <div class="layui-input-inline">
          <input type="text" id="txtKey" placeholder="请输入关键字" autocomplete="off" class="layui-input">
        </div>
      <button class="layui-btn layui-btn-sm" lay-event="btnSubmit">查询</button>
      <button class="layui-btn layui-btn-sm" lay-event="btnReset">重置</button>
    </script>

    <!-- //行按钮 -->
    <script type="text/html" id="barDemo">
            <div class="layui-btn-container">
                    <a class="layui-btn layui-btn-sm" href="editMovie.html?id={{d._id}}">基本信息</a>
                    <button class="layui-btn layui-btn-sm" lay-event="director">导演</button>
                    <button class="layui-btn layui-btn-sm" lay-event="actor">演员</button>
                    <button class="layui-btn layui-btn-sm" lay-event="movie_photo">剧照</button>
                    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete"> 
                    <i class="layui-icon ">&#xe640;</i></button>
            </div>
      </script>

    <!-- lsc  按钮 -->
    <script id="classic" type="text/html">
        <input value="{{d._id}}" type="checkbox" name="isHot" lay-skin="switch" lay-text="是|否" {{d.isHot?"checked":""}}>
    </script>
    <script id="coming" type="text/html">
        <!-- <input value="{{d._id}}" type="checkbox" name="isComing" lay-skin="switch" lay-text="是|否" {{d.isClassic?"checked":""}}> -->

    <input value="{{d._id}}" type="checkbox" name="isComing" lay-skin="switch" lay-text="是|否" {{d.isComing?"checked":""}}>
    </script>
    <script id="hot" type="text/html">
        <!-- <input value="{{d._id}}" type="checkbox" name="isHot" lay-skin="switch" lay-text="是|否" {{d.isClassic?"checked":""}}> -->

    <input value="{{d._id}}" type="checkbox" name="isHot" lay-skin="switch" lay-text="是|否" {{d.isHot?"checked":""}}>
    </script>
</body>
</html>